<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <meta content="telephone=no" name="format-detection" />
        <title>我的玩家</title>
        <link href="{{asset('/mobile/css/style.css')}}" rel="stylesheet" type="text/css">
    </head>
    <style type="text/css">
        body{
            background-color: #F1F1F1;
            font-size: 16px;
        }
        input{
            border: none;
            outline: none;
        }
        .top-wrap{
            background-color: #D5D5D5;
            overflow: hidden;
            height: 3.6rem;
            box-sizing: border-box;
            padding: 0 0 0 1rem;
        }
        .inp-wrap{
            width: 80%;
            float: left;
            height: 2rem;
            border-radius: 2rem;
            background-color: #FFFFFF;
            margin-top: 0.8rem;
            position: relative;
        }
        .btn-search{
            width: 20%;
            float: right;
            height: 3.6rem;
            line-height: 3.6rem;
            text-align: center;
            color: #535353;
        }
        .inp-search{
            position: absolute;
            top: 50%;
            left: 2rem;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            width: 80%;
        }
        .mine{
            box-sizing: border-box;
            padding: 0.8rem 1rem;
            overflow: hidden;
            margin-bottom: 10px;
            background-color: #FFFFFF;
        }
        .mine-left{
            float: left;
        }
        .mine-right{
            float: right;
            color: #D74B2D;
        }
        .con{
        }
        .mine-icon{
            float: left;
            height: 1rem;
            margin-right: 5px;
        }
        .tag{
            border: 1px solid #D9D9D9;
            border-radius: 10px;
            background-color: #FFFFFF;
            width: 96%;
            margin: 0 auto;
            padding: 10px 0;
            overflow: hidden;
        }
        .portrait{
            float: left;
            width: 35%;
            text-align: center;
            font-size: 0.9rem;
            margin-top: 5%;
        }
        .name{
            margin-top: 5px;
            padding: 0 10px;
        }
        .portrait img{
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }
        .detail{
            margin-left: 35%;
            font-size: 0.9rem;
        }
        .detail-li{
            margin: 10px 0;
        }
        .title{
            display: inline-block;
            /*width: 4rem;*/
        }
        .value{
            display: inline-block;
        }
        .red{
            color: #D42400;
        }
        .btn-wrap{
            width: 100%;
            text-align: center;
        }
        .btn{
            width: 30%;
            display: inline-block;
            margin-right: 20px;
        }
        .btn img{
            width: 100%;
        }
    </style>
    <body>
        <div class="top-wrap">
            <form action="/mobile/agent/my_user/{{$agent->id}}" method="GET">
                <div class="inp-wrap">
                    <input type="text" name="keywords" class="inp-search" id="inpSearch" placeholder="请输入关键字" value="{{$keywords}}"/>
                </div>
                <div class="btn-search" id="search">搜索</div>
            </form>
        </div>
        <div class="mine">
            <img class="mine-icon" src="/imgs/yinpiao.png"/>
            <div class="mine-left">我的银票</div>
            <div class="mine-right">{{$agent->user()->gems}}</div>
        </div>
        <div class="con">
            @foreach($users as $user)
                <div class="tag">
                    <div class="portrait">
                        @if($user->headimg)<img src="{{$user->headimg}}">@else<img src="{{asset('/image/panda.jpg')}}">@endif
                        <div class="name">@if($user->nickname) {{$user->nickname}} @else{{ base64_decode($user->name) }}@endif</div>
                    </div>
                    <div class="detail">
                        <div class="detail-li">
                            <div class="title">玩&nbsp;家&nbsp;ID&nbsp;:</div>
                            <div class="value">{{$user->userid}}</div>
                        </div>
                        <div class="detail-li">
                            <div class="title">用户消费:</div>
                            <div class="value red">￥{{$user->cost()}}</div>
                        </div>
                        <div class="detail-li">
                            <div class="title">当前银票:</div>
                            <div class="value red">{{$user->gems}}</div>
                        </div>
                        <div class="detail-li">
                            <div class="title">注册时间:</div>
                            <div class="value red">{{$user->created_at}}</div>
                        </div>
                        <div class="btn-wrap">
                            <div data-id="1" class="btn" onclick="window.location.href='/mobile/agent/second_card/{{$user->id}}'"><img src="{{asset('/imgs/btn_fpyp.png')}}"/></div>
                            <div data-id="2" class="btn" onclick="window.location.href='/mobile/agent/second_log/{{$user->id}}'"><img src="{{asset('/imgs/btn_fpjl.png')}}"/></div>
                        </div>
                    </div>
                </div>
            @endforeach    
        </div>
    <script type="text/javascript" src="{{asset('/mobile/js/jquery-1.8.3.min.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/Inertia.js')}}"></script>
    <script type="text/javascript" src="{{asset('/js/backHome.js')}}"></script>
    <script type="text/javascript">
        $('#search').click(function() {
            $(this).parents('form').submit();
        })
        $('.btn').on('touchstart', function() {
            // 点击效果
            var img = $(this).find('img')
            var oldSrc = img.attr('src')
            var newSrc = oldSrc.replace('.png','_y.png')
            img.attr('src', newSrc)
        })
        $('.btn').on('touchend', function() {
            // 点击效果
            var img = $(this).find('img')
            var oldSrc = img.attr('src')
            var newSrc = oldSrc.replace('_y.png','.png')
            img.attr('src', newSrc)
        })
        $('.btn').click(function(e) {
            var myid = $(this).attr('data-id')
            console.log(myid)
            switch (myid){
                case '1':
                    break;
                case '2':
                    break;
                case '3':
                    break;
                case '4':
                    break;
                default:
                    break;
            }
        })
    </script>
    </body>
</html>
